<script setup>
	import {
		reactive
	} from 'vue'
	import {
		jumpTo,
		navigateTo
	} from '@/utils/common'
	import http from '@/api/chatsApi'
	import {
		onLoad,
		onShow,
		onUnload
	} from "@dcloudio/uni-app";
	import {
		useStore
	} from "@/stores/index"
	const userStore = useStore()

	const data = reactive({
		days: 1,
		current: 1,
		scrollTop: 0,
		userInfo: userStore.user.userInfo,
		page: 1,
		total: 0,
		list: [],

		otherPage: 1,
		otherTotal: 0,
		otherList: [],

		applyPage: 1,
		applyTotal: 0,
		applyList: [],


		scrollTop: 0,

		group_num: 0,
		private_num: 0,
		public_num: 0,

		chatCount: {
			days: {
				public_num: {
					text_num: 0,
					picture_num: 0,
					video_num: 0,
					group_num: 0,
					voice_num: 0
				},
				private_num: {
					text_num: 0,
					picture_num: 0,
					video_num: 0,
					group_num: 0,
					voice_num: 0
				},
				group_num: {
					text_num: 0,
					picture_num: 0,
					video_num: 0,
					group_num: 0,
					voice_num: 0
				},
				now_count: 0
			},
			count_num: 0
		},

		tabList: [{
			name: '已加入分组'
		}, {
			name: '未加入分组'
		}],
		currentTab: 0

	})


	onLoad(async (options) => {
		data.days = +options.days;

		//个人信息记录
		const res2 = await http.chatCount(data.days);
		data.chatCount = res2.data;

		const res1 = await http.readNum();
		data.group_num = res1.data.group_num;
		data.private_num = res1.data.private_num;
		data.public_num = res1.data.public_num;


		// data.userInfo = uni.getStorageSync('userinfo');	

		await loadData();
	})

	// const scrolltolower = async (e) => {
	// 	data.page++;
	// 	await loadData()
	// }

	const loadData = async () => {
		//公开对应开放，定向对应分组
		const res = await http.groupList(2, data.page, data.days);
		data.total = res.data.total;

		if (data.page > 1) {
			data.list = data.list.concat(res.data.data);
		} else {
			data.list = res.data.data;
		}


		if (data.currentTab == 0) {
			data.applyPage++;
			await getApplyGroupList()
		} else {
			data.otherPage++;
			await getOtherGroupList()
		}

	}

	const getOtherGroupList = async () => {
		const res = await http.otherGroupList(data.days, data.otherPage);

		if (data.otherPage > 1) {
			data.otherList = data.otherList.concat(res.data);
		} else {
			data.otherList = res.data;
		}
	}

	const getApplyGroupList = async () => {
		const res = await http.applyGroupList(data.applyPage, data.days)
		if (data.applyPage > 1) {
			data.applyList = data.applyList.concat(res.data);
		} else {
			data.applyList = res.data;
		}
	}


	// const scrollToBottom = () => {
	// 	// 自动滚动到底部
	// 	nextTick(() => {
	// 		const query = uni.createSelectorQuery()
	// 		query.select('.dialogue-box').boundingClientRect()
	// 		query.select('.dialogue-box-content').boundingClientRect()
	// 		query.exec(res => {
	// 			const scrollViewHeight = res[0].height
	// 			const scrollContentHeight = res[1].height

	// 			if (scrollContentHeight > scrollViewHeight) {
	// 				const scrollTop = scrollContentHeight - scrollViewHeight
	// 				data.scrollTop = scrollTop
	// 			}
	// 		})
	// 	})
	// }

	const applyGroup = async (item) => {

		uni.showModal({
			title: '提示',
			content: `您确定申请旁听 ${item.group_name} ？`,
			confirmText: '确定',
			cancelText: '取消',
			success: async (res) => {
				if (res.confirm) {
					const res = await http.applyGroup(item.id, data.days);

					uni.showToast({
						title: res.msg,
						icon: 'none',
						success: async () => {
							data.page = 1;
							data.otherPage = 1

							data.list = []
							data.otherList = [];

							await loadData()
						},
					})
				}
			}
		})
	}

	const back = () => {
		jumpTo('/pages/room/index')
	}

	const goPublic = () => {
		jumpTo("/pages/exclusive/public?days=" + data.days)
	}

	const goPrivate = () => {
		jumpTo("/pages/exclusive/private?days=" + data.days)
	}

	const getSex = () => {
		switch (+data.userInfo.sex) {
			case 0:
			default:
				return "";
			case 1:
				return "先生";
			case 2:
				return "女士";
		}
	}

	const changeTab = async (index) => {

		switch (index) {
			case 0:
				data.applyPage = [];
				data.applyPage = 1;
				await getApplyGroupList()
				break;
			case 1:
				data.otherList = [];
				data.otherPage = 1;
				await getOtherGroupList()
				break;
		}
	}
</script>

<template>
	<view class="header">
		<!-- <image class="back" @click="back" src="/static/icon/back.png" mode="aspectFit" /> -->
		<uni-icons class="back" type="back" @click="back" size="24" color="#828282"></uni-icons>
		<image src="/static/temp/banner.jpeg" mode="widthFix" />
	</view>

	<view class="avatar">
		<image :src="data.userInfo.avatar" mode="aspectFit" />

		<text>{{data.userInfo.realname}}&nbsp;{{getSex()}} IVMCR专属定制室·特权定制\n IVMCR Exclusive Customization Room</text>
	</view>

	<view class="nav">
		<view @click="goPublic">
			<text>开放式定制拆解过程
				<text class="icon">{{data.public_num}}</text>
			</text>
		</view>
		<view @click="goPrivate" v-if="data.userInfo.to_user_id">
			<text>私人
				<text class="icon">{{data.private_num}}</text>
			</text>
		</view>
		<view :class="{ isActive: true }">
			<text>分组
				<text class="icon">{{data.group_num}}</text>
			</text>
		</view>
	</view>

	<!-- <text class="title">本天人数89人</text> -->
	<text class="title count">
		{{
            `公开交互：第${data.chatCount.days.public_num.voice_num}次语音交互  ${data.chatCount.days.public_num.video_num}次视频交互  第${data.chatCount.days.public_num.text_num}次文字交互  ${data.chatCount.days.public_num.group_num}次资料交互  第${data.chatCount.days.public_num.picture_num}次图片交互
        私人交互：第${data.chatCount.days.private_num.voice_num}次语音交互  ${data.chatCount.days.private_num.video_num}次视频交互  第${data.chatCount.days.private_num.text_num}次文字交互  ${data.chatCount.days.private_num.group_num}次资料交互  第${data.chatCount.days.private_num.picture_num}次图片交互
        分组交互：第${data.chatCount.days.group_num.voice_num}次语音交互  ${data.chatCount.days.group_num.video_num}次视频交互  第${data.chatCount.days.group_num.text_num}次文字交互  ${data.chatCount.days.group_num.group_num}次资料交互  第${data.chatCount.days.group_num.picture_num}次图片交互
        本日志鹏先生定制总计交互次数：${data.chatCount.days.now_count}次
        截止到目前${data.userInfo.realname}&nbsp;${getSex()}整体定制的交互次数为：${data.chatCount.count_num}次`
        }}
	</text>

	<!-- 内容区 -->
	<scroll-view scroll-y class="main dialogue-box" :scroll-with-animation="false">
		<!-- @scrolltolower="scrolltolower" -->
		<view class="dialogue-box-content">
			<text class="title">专属组</text>
			<view class="group" @click="navigateTo('/pages/exclusive/exclusive?id='+ item.id+'&name='+ item.group_name)"
				v-for="(item,index) in data.list" :key="index">
				<view class="avatar">
					<text class="tip">{{item.size}}</text>
					<image :src="item.avatar ? item.avatar:'/static/icon/function2.png'" mode="aspectFit" />
				</view>
				<text class="name">{{item.group_name}}</text>

				<uni-icons class="icon" type="forward" size="24" color="#828282"></uni-icons>
				<!-- <image class="icon" src="/static/icon/back.png" mode="aspectFit" /> -->
			</view>
			<!-- 旁听组 -->
			<view style="height: 103rpx" />
			<text class="title">可申请旁听组</text>

			<u-tabs :list="data.tabList" :is-scroll="false" :font-size="20"  v-model="data.currentTab" active-color="#000"
				@change="changeTab"></u-tabs>

			<view v-if="data.currentTab==0" class="group down"
				@click="navigateTo('/pages/exclusive/exclusive?id='+ item.id+'&name='+ item.group_name)"
				v-for="(item,index) in data.applyList" :key="index">
				<view class="avatar">
					<text class="tip">{{item.size}}</text>
					<image :src="item.avatar ? item.avatar:'/static/icon/function2.png'" mode="aspectFit" />
				</view>
				<text class="name">{{item.group_name}}</text>
				<!-- <text class="subscribe" @click="applyGroup(item)">申请旁听</text> -->
			</view>
			<view v-else-if="data.currentTab==1" class="group down" v-for="(item,index) in data.otherList" :key="index">
				<view class="avatar">
					<text class="tip">{{item.size}}</text>
					<image :src="item.avatar ? item.avatar:'/static/icon/function2.png'" mode="aspectFit" />
				</view>
				<text class="name">{{item.group_name}}</text>
				<text class="subscribe" @click="applyGroup(item)">申请旁听</text>
			</view>
			<view style="height: 62rpx" />
		</view>
	</scroll-view>



</template>

<style lang="scss" scoped>
	.header {
		padding-top: 40rpx;
		display: flex;
		align-items: center;

		>image {
			width: 528rpx;
		}

		.back {
			margin-left: 30rpx;
			margin-right: 60rpx;
			width: 22rpx;
			height: 22rpx;
		}
	}

	.avatar {
		margin-top: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		>image {
			margin-right: 5rpx;
			width: 87rpx;
			height: 87.65rpx;
		}

		>text {
			color: rgb(0, 0, 0);
			font-size: 12rpx;
			font-weight: 600;
			line-height: 1.2;
			text-align: center;
		}
	}

	.title {
		padding: 12rpx 88rpx 4rpx;
		color: rgb(0, 0, 0);
		font-size: 14rpx;
		font-weight: 600;
		line-height: 1.6;
		text-align: left;
	}

	.count {
		padding: 0 0 6rpx 100rpx;
		border-bottom: 1rpx solid rgb(208, 222, 233);
		box-sizing: border-box;
	}

	.nav {
		margin-top: 20rpx;
		display: flex;

		.isActive {
			.icon {
				display: none;
			}

			>text {
				color: #000;
			}
		}

		>view {
			flex: 1;
			width: fit-content;
			padding: 16rpx 0;
			color: rgb(102, 102, 102);
			font-size: 15rpx;
			font-weight: 600;
			line-height: 14rpx;
			text-align: center;

			>text {
				position: relative;
			}

			.icon {
				position: absolute;
				bottom: 6rpx;
				left: -30rpx;
				width: 30rpx;
				height: 30rpx;
				background: rgb(255, 218, 103);
				border-radius: 50%;
				color: rgb(255, 255, 255);
				font-size: 15rpx;
				font-weight: 600;
				line-height: 30rpx;
				text-align: center;
			}
		}
	}

	.main {
		height: calc(100% - 518rpx);
		// background-color: #ff0;

		.title {
			padding-left: 46rpx;
			color: rgb(0, 0, 0);
			font-size: 20rpx;
			font-weight: 600;
			line-height: 14rpx;
			text-align: center;
		}

		.group {
			margin-top: 34rpx;
			display: flex;
			align-items: center;
			padding-left: 40rpx;
			padding-right: 30rpx;

			.down {
				padding-bottom: 16rpx;
			}

			.avatar {
				position: relative;
				width: 87rpx;
				height: 87rpx;

				>image {
					width: 100%;
					height: 100%;
				}

				.tip {
					position: absolute;
					top: -15rpx;
					left: -15rpx;
					width: 30rpx;
					height: 30rpx;
					background: rgb(255, 218, 103);
					border-radius: 50%;
					color: rgb(255, 255, 255);
					font-size: 15rpx;
					font-weight: 600;
					line-height: 30rpx;
					text-align: center;
					z-index: 1;
				}
			}

			.name {
				margin-left: 50rpx;
				margin-right: auto;
				color: rgb(0, 0, 0);
				font-size: 20rpx;
				font-weight: 600;
				line-height: 14rpx;
				text-align: center;
			}

			.icon {
				// transform: rotate(180deg);
				// width: 22rpx;
				// height: 22rpx;
			}

			.subscribe {
				margin-right: -6rpx;
				width: 113rpx;
				height: 58rpx;
				border-radius: 10rpx;
				background: rgb(242, 242, 242);
				color: rgb(0, 0, 0);
				font-size: 20rpx;
				font-weight: 600;
				line-height: 58rpx;
				text-align: center;
			}
		}
	}
</style>